<!-- 时间尺度 -->
<template>
  <div class="time">
    <div>
      <!-- <p id="text">{{thisTime.split(" ")[0]}}</p>
      <p id="time">{{thisTime.split(" ")[1]}}</p>
      <div class="img">
        <img src="../assets/img/表盘仪.png" draggable="false" />
      </div>
      <div style="margin-right: 160px">
        <img id="img1" src="../assets/img/快退.png" @click="upTime()" />
        <img v-if="playState" id="img2" src="../assets/img/暂停.png" @click="(playState = false), stopInterval()"/>
        <img v-if="!playState" id="img3" src="../assets/img/开始.png"  @click="(playState = true), startInterval()"/>
        <img id="img4" src="../assets/img/快进.png" @click="nextTime()" />
      </div> -->
    </div>
    <div class="keDuChiBox" style="width: 88%;height: 100%;position: relative;display: flex;align-items: flex-end;overflow: auto;" @mousedown="moveTime">
      <div :class="'box-'+index" v-for="(item, index) in timeList" :key="index">
        <template>
          <el-tooltip class="item"  effect="dark"  :content="item"  placement="top-end"  >
            <div class="keDuXian " :style="index % 12== 0 ? 'height:100%;' : 'height:60%;'" :id="item" @click="timeClick(item)">
              <!-- <template v-if="index > 0">
                <div v-if="index % 12 == 0" class="timeText">{{ item }}</div>
              </template> -->
            </div>
          </el-tooltip>
        </template>
      </div>
      <!-- <div v-show="timeList.length != 0" class="progress" :style="'width:' + progresswidth + 'px;'">
        <div style="width: 100%; height: 40%; background-color: rgb(20, 170, 255)"></div>
      </div> -->

      <!-- <img v-show="timeList.length != 0" src="../assets/img/时间轴定位.png" class="progressImg"
           :style="'left:' + (progresswidth == 0 ? -7 : progresswidth - 8) + 'px;'" /> -->
    </div>
  </div>
</template>

<script>
import { getScopeTime } from "../utils/regular.js";
import { getYMDHMS ,getNYR} from "../utils/timeUtil.js";
export default {
  data() {
    return {
      timeList: [],
      thisTime: "",
      progresswidth: 0,
      playState: false,
      Interval: "",
      time_p:"",
        x:0,
    };
  },
  beforeDestroy() {
    clearInterval(this.Interval);
  },
  methods: {
      //移动时间方块
      moveTime(e){
          let x=e.clientX
          let y=e.clientY
          //console.log(document.elementFromPoint(x,y))
          let isdown=true
          let that=this
          if(document.elementFromPoint(x,y).className=='progressImg'){
              document.onmousemove=function (v) {
                  v.preventDefault && v.preventDefault() //去掉浏览器原始的
                  if(isdown==false) return
                  //鼠标滑动经过的容器集合
                  let elementsFromPoint=document.elementsFromPoint(v.clientX,v.clientY)
                  elementsFromPoint.map(item=>{
                      if(item.className.indexOf('box')!=-1){
                          that.thisTime=that.timeList[item.className.split('-')[1]]
                          that.progresswidth=document.getElementsByClassName(item.className)[0].offsetLeft
                          }
                  })
                  //that.progresswidth=v.screenX-document.getElementsByClassName('keDuChiBox')[0].offsetLeft-document.getElementsByClassName('progressImg')[0].width
                  //document.getElementsByClassName('progressImg')[0].style.left =v.clientX-document.getElementsByClassName('keDuChiBox')[0].offsetLeft
                  //document.getElementsByClassName('progress')[0].style.left =v.clientX-document.getElementsByClassName('keDuChiBox')[0].offsetLeft
                  //console.log(that.timeList[parseInt(document.elementFromPoint(v.clientX,v.clientY).className.split('-')[1])])

              }
              document.onmouseup=function (u) {
                  console.log("onmouseup")
                  isdown=false
                  /*let elementsFromPoint=document.elementsFromPoint(u.clientX,u.clientY)
                  elementsFromPoint.map(item=>{
                      if(item.className.indexOf('box')!=-1){
                          console.log(that.timeList[item.className.split('-')[1]])
                      }
                  })
                  that.progresswidth=u.clientX-document.getElementsByClassName('keDuChiBox')[0].offsetLeft-document.getElementsByClassName('progressImg')[0].width
                  */

              }
          }


      },
    startInterval() {
      this.Interval = setInterval(() => {
        if (this.timeList.indexOf(this.thisTime) + 1 == this.timeList.length) {
          this.playState = false;
          this.stopInterval();
        } else {
          this.thisTime =
            this.timeList[this.timeList.indexOf(this.thisTime) + 1];
          this.setProgressWidth();
        }
      }, 1000);
    },
    stopInterval() {
      clearInterval(this.Interval);
    },

    //自动生成刻度尺
    init(time, start, end) {
      this.timeList = getScopeTime(start, end, 3);
      this.thisTime = time;
      this.$nextTick(() => {
        this.setProgressWidth();
      });
    },
    //传入刻度尺
    initTimes(time, times) {
      this.timeList = times;
      this.thisTime = time;
      this.$nextTick(() => {
        this.setProgressWidth();
      });
    },
    //点击刻度线
    timeClick(time) {
          console.log(time)
      this.thisTime = time;
      this.setProgressWidth();
    },

    setProgressWidth() {
      this.progresswidth = document.getElementById(this.thisTime).offsetLeft;
      //console.log(this.thisTime)
    },
    upTime() {
      if (this.thisTime == this.timeList[0]) {
        this.$message({
          message: "已经是第一天了",
          type: "warning",
        });
      } else {
        this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime) - 1];
        this.setProgressWidth();
      }
    },
    nextTime() {
      if (this.thisTime == this.timeList[this.timeList.length - 1]) {
        this.$message({
          message: "已经是最后一天了",
          type: "warning",
        });
      } else {
        this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime) + 1];
        this.setProgressWidth();
      }
    },
  },
};
</script>

<style scoped>
#img1 {
  position: fixed;
  bottom: 30px;
  left: 50px;
  width: 18px;
  cursor: pointer;
}
#img2 {
  position: fixed;
  bottom: 30px;
  left: 80px;
  width: 18px;
  cursor: pointer;
}
#img3 {
  position: fixed;
  bottom: 30px;
  left: 80px;
  width: 18px;
  cursor: pointer;
}
#img4 {
  position: fixed;
  bottom: 30px;
  left: 110px;
  width: 18px;
  cursor: pointer;
}
.img {
  position: fixed;
  bottom: 15px;
  left: 15px;
  display: inline-block;
  /* margin-right: 100px; */
}
#text {
  position: fixed;
  bottom: 68px;
  left: 55px;
  z-index: 999;
  color: #fff;
  font-size: 10px;
}

#time {
  position: fixed;
  bottom: 45px;
  left: 60px;
  z-index: 999;
  color: #fff;
  /* color: rgb(64, 196, 255; */
  font-size: 10px;
}
.time {
  width: 100%;
  height: 100%;
  background: rgba(10, 34, 66, 0.65);
  /* background: rgba(161, 167, 163, 0.65); */
  box-shadow: inset 0px 1px 12px 0px rgba(75, 137, 255, 0.5);
  border-radius: 4px;
  border: 1px solid #57c8ee;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.time_menu {
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 3%;
  box-sizing: border-box;
}
.time_menu img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition-duration: 0.5s;
}
.progress {
  height: 100%;
  position: absolute;
  display: flex;
  align-items: flex-end;
  z-index: -1;
  transition-duration: 0.5s;
}

.triangle {
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-top-color: #00ffff;
  /*  opacity: 1; */
  position: absolute;
  left: -20px;
  top: 20px;
}
.keDuXian {
  width: 1px;
  background-color: #bdc2c9;
  cursor: pointer;
  margin-right: 10px;
}
.progressImg {
  width: 1.125rem;
  height: 1.125rem;
  position: absolute;
  z-index: 9;
  cursor: pointer;
}
::-webkit-scrollbar {
  height: 5px;
}
div[class^="box-"]{
  height: 40%;
  display: flex;
  flex-shrink: 0;
  flex-flow: row nowrap;
  align-items: flex-end;
}
.timeText{
  position: relative;
  top: -20px;
  left: -60px;
  color: #bdc2c9;
  width: 120px;
  font-size: 0.75rem;
}
</style>
